<template>
   <div class="app-container">
     <el-row :gutter="20">
      <!--  -->
      <el-col :span="6" :xs="24">
          <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
          <el-tree :data="treeNodes" 
                   :props="{ children: 'list', label: 'name', disabled: '' }" 
                   icon-class="el-icon-share"
                   @node-click="handleNodeClick" 
           >
             <template #default="{ node, data }">
              <div class="custom-tree-node">
                <div class='el-button' style="border: 0px">
                <el-icon color="#409EFC" >
                   <Document v-if ="data.nodeType == 1" style="width: 20px; height: 20px"  />
                      <Folder v-else style="width: 20px; height: 20px"/>
                </el-icon>
                <span> {{ data.name }}</span>
                </div>
                <div>
                  <el-button
                    v-show="data.nodeType == 2"
                    type="success"
                    size="small"
                    :icon="Plus"
                    circle
                    plain
                    @click.stop="handleAdd(scope.data)"
                  />
                  <el-button
                    type="warning"
                    size="small"
                    :icon="Edit"
                    circle
                    plain
                    @click.stop="handleUpdate(scope.data)"
                  />
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    circle
                    plain
                    @click.stop="handleDelete(scope.data)"
                  />
                </div>
              </div>
            </template>
           </el-tree>
      </el-col>
      <el-col :span="18" :xs="24">
        <div class="search">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="addRow">添加</el-button>
            <el-button size="mini" type="primary" @click="removeRow(multipleSelection)">删除</el-button>
            <el-button size="mini" type="primary" @click="loadTableRows">刷新</el-button>
          </el-col>
        </div>

          <el-table
            ref="multipleTable"
            :data="tableRows"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="name" label="名称" width="150" align="center"></el-table-column>
            <el-table-column prop="pyName" label="拼音" width="150" align="center"></el-table-column>
            <el-table-column prop="type" label="类型" width="150" align="center"></el-table-column>
            <el-table-column prop="valueCountType" label="关系" width="150" align="center"></el-table-column>
            <el-table-column prop="formAttrSelect" label="范围" width="150" align="center"></el-table-column>
            <el-table-column prop="showAttr" label="表单显示名" width="150" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="150px">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="editRow(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="removeRow([scope.row])">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-col>
      </el-row>
      <el-dialog :lock-scroll="true" v-model="addCompProps.visible" width="800px" :close-on-click-modal="false">
        <div class="title" slot="title">添加</div>
        <addComp :data="addCompProps.data" @callback="callback" style="height: 530px"></addComp>
      </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'userData'
};
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watchEffect, onMounted, getCurrentInstance, toRefs } from 'vue'
    import { ElTree } from 'element-plus';
    import { Document, Folder,Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import addComp from './add.vue';
    import editComp from './edit.vue';
    import addNodeComp from './addNode.vue';
    import editNodeComp from './editNode.vue';

    /*****请求组件引入****/
    import { formTree } from '@/api/form';
    import { formAttrList} from '@/api/formAttr';

   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      treeNodes: [],
      currentNodeId:'',
      tableRows: [],
      searchData: {},
      loading: false,
      currentRow:{},
      addCompProps:{data:{},visible:false},
    });
    const {
      treeNodes,
      tableRows,
      searchData,
      loading,
      currentRow,
      addCompProps,
    } = toRefs(state);


    async function loadTreeNodes() {
      formTree(1).then(response => {
        state.treeNodes = response.data;
      });
    }
    
    function loadTableRows(){
      state.loading = true;
      formAttrList(state.searchData).then(response =>{
        state.tableRows = response.data;
        state.loading=false;
      });
    }

    //添加修改回调
    function callback(newData) {
      state.addCompProps.visible = false;
     
     // if (!newData.callName) {
      //  return;
    //  }
     // this[newData.callName]();
    }

    function addRow() {
      //初始化，重新传递值，防止子组件，数据变化无法检查到
      state.addCompProps.visible = true;
      state.addCompProps.data = {formId: state.searchData.formId};
    };
    

    const handleNodeClick = (data: Tree) => {

      console.log(data);
      
      state.searchData.formId = data.id;
      loadTableRows();
    }

    onMounted(() => {
         loadTreeNodes();
    });
  
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  line-height: 40px0;
}

.el-tree-node__label{
  width: 100%
}

.el-tree-node__content {
  height: 40px;
}
</style>